<template lang="html">
  <div class="youhui">
    <Headbar :title="title"></Headbar>
    <section class="product bg_f">
      <a name="f"></a>
      <section class="imgLink">
              <!-- 一行一图片 -->
              <ul class="lin_1">
                  <li><a href=""><img src="http://img.caissa.com.cn/2017/04/201704141610116827735_thumbnail.jpg" alt=""></a></li>
              </ul>
          </section>
      <ul class="pro1_2">
      <li>
                      <a href="http://event.caissa.com.cn/topic/sales/13/">
                          <div class="left">
                              <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1497327393320&amp;di=8d9313aa4201d0f150336d9f186cbf2e&amp;imgtype=0&amp;src=http%3A%2F%2Fbrandimg.yoka.com%2FBrandLogo%2Fc9233aa2-507c-4912-a554-a034bcb7d086.jpg" alt="">
                              <h5>博洛茗</h5>

                          </div>
                          <div class="right">
                              <h3>博洛茗9折优惠券</h3>
                              <p>个别商品除外</p>
                              <div class="tips">
                                  <span>电子优惠券</span>
                                  <span>全店通用</span>

                              </div>
                              <div class="dates">
                                  <span>仅临柜使用</span>

                              </div>
                              <div class="price">
                                  <em><i>9折</i></em>
                              </div>
                          </div>
                      </a>
                  </li>


      <li>
                      <a href="http://event.caissa.com.cn/topic/sales/wangquan/">
                          <div class="left">
                              <img src="http://img.caissa.com.cn/2017/08/201708081151251613168_thumbnail.jpg" alt="">
                              <h5>王权免税</h5>

                          </div>
                          <div class="right">
                              <h3>王权免税优惠券</h3>
                              <p>个别商品除外</p>
                              <div class="tips">
                                  <span>电子优惠券</span>
                                  <span>全店通用</span>

                              </div>
                              <div class="dates">
                                  <span>仅临柜使用</span>

                              </div>
                              <div class="price">
                                  <em><i>8-9折</i></em>
                              </div>
                          </div>
                      </a>
                  </li>

      <li>
                      <a href="http://event.caissa.com.cn/topic/sales/7/">
                          <div class="left">
                              <img src="http://img.caissa.com.cn/2017/04/201704131719584150300_thumbnail.jpg" alt="">
                              <h5>近铁百货</h5>

                          </div>
                          <div class="right">
                              <h3>5%优惠+8%退税+1000日元劵</h3>
                              <p>个别商品除外</p>
                              <div class="tips">
                                  <span>电子优惠券</span>
                                  <span>全店通用</span>

                              </div>
                              <div class="dates">
                                  <span>仅临柜使用</span>

                              </div>
                              <div class="price">
                                  <em><i>5%优惠+8%退税+1000日元劵</i></em>
                              </div>
                          </div>
                      </a>
                  </li>



      		<li>
                      <a href="http://event.caissa.com.cn/topic/sales/12/">
                          <div class="left">
                              <img src="http://img.caissa.com.cn/2017/04/201704131719589150170_thumbnail.jpg" alt="">
                              <h5>松本清</h5>

                          </div>
                          <div class="right">
                              <h3>3%（5）%优惠+8%退税</h3>
                              <p>个别商品除外</p>
                              <div class="tips">
                                  <span>电子优惠券</span>
                                  <span>全店通用</span>

                              </div>
                              <div class="dates">
                                  <span>仅临柜使用</span>

                              </div>
                              <div class="price">
                                  <em><i>3%（5）%优惠+8%退税</i></em>
                              </div>
                          </div>
                      </a>
                  </li>

      		<li>
                      <a href="http://event.caissa.com.cn/topic/sales/15/">
                          <div class="left">
                              <img src="http://img03.jpyoo.com/shopping/2014-03-26/p18jun2pfo82apspgic1ngl1sip1.jpg" alt="">
                              <h5>唐吉诃德</h5>

                          </div>
                          <div class="right">
                              <h3>8%优惠电子券</h3>
                              <p>个别商品除外</p>
                              <div class="tips">
                                  <span>电子优惠券</span>
                                  <span>全店通用</span>

                              </div>
                              <div class="dates">
                                  <span>仅临柜使用</span>

                              </div>
                              <div class="price">
                                  <em><i>8%优惠+最高减2000日元</i></em>
                              </div>
                          </div>
                      </a>
                  </li>
      </ul>
    </section>
  </div>

</template>

<script>
import Headbar from './head'
export default {
  data(){
    return{
      title:'来撒旅游全球店铺优惠券'
    }
  },
  components:{
    Headbar
  }
}
</script>

<style lang="css">
.bg_f {
    background-color: #f5f5f5;
}
.product a {
    position: relative;
}
.imgLink {
    background-color: #f5f5f5;
}

.imgLink ul {
    padding: 1%;
}
.product ul {
    padding: 1%;
    font-size: 0;
    letter-spacing: -6px;
}

.imgLink li {
    padding: 1%;
}
i{
  font-style: normal;
}
.product li {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0;
    width: 100%;
    padding: 1%;
    vertical-align: top;
    position: relative;
}
.right{
  text-align: left;
}
.imgLink a {
    border-radius: 5px;
}
.product a {
    position: relative;
}
.bg_f img {
    display: block;
    width: 100%;
    height: 100%;
}
.product ul {
    padding: 1%;
    font-size: 0;
    letter-spacing: -6px;
}
.pro1_2 li {
    margin: 5px 0;
    padding: 3% 0px;
    background-color: #fff;
}
.product li {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0;
    width: 100%;
    padding: 1%;
    vertical-align: top;
    position: relative;
}
.pro1_2 .left {
    float: left;
    width: 40%;
    margin: 0px 10px;
    background-color: #f0efe8;
    border-radius: 5px;
    overflow: hidden;
}
.left h5 {
    font-size: 14px;
    line-height: 2em;
    text-align: center;
    font-weight: normal;
}
.product h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-weight: normal;
}
.right p {
    color: #999;
    padding: 5px 0;
}
.product p {
    min-height: 25px;
}
.tips {
    height: 34px;
}
.tips span {
    float: left;
    margin: 5px 10px 5px 0;
    padding: 2px 5px;
    border: 1px solid #00b0ec;
    border-radius: 3px;
    color: #0099a9;
    font-size: 12px !important;
    text-align: center;
    position: static !important;
}
.dates span {
    font-size: 12px !important;
    float: left;
    position: static !important;
}
.price {
    text-align: right;
}
.product em {
    color: #ff6b01;
}
.product i {
    font-size: 22px;
}
.product span {
    color: #666;
}
</style>
